<template>

  <div>

    <!-- 新建任务区域开始 -->

    <Modal v-model="modal1" @on-ok="ok" title="链接下载">

      <!-- 链接任务区域 -->

      <Input

        v-model="value6"

        type="textarea"

        :rows="3"

        placeholder="添加多个下载链接时,请确保每行只有一个链接(支持磁力链接)"

      />

      <div class="input">

        <p style="float: left; line-height: 32px">重命名：</p>

        <Input

          v-model="value14"

          placeholder="选填(仅支持单任务)"

          clearable

          style="width: 200px"

        />

      </div>



      <div class="input">

        <p style="float: left; line-height: 32px; margin-left: 60px">

          下载线程：

        </p>

        <InputNumber

          controls-position="right"

          :max="20"

          :min="1"

          v-model="num"

        ></InputNumber>

      </div>



      <div style="margin-top: 82px">

        <p style="float: left; line-height: 32px">下载路径：</p>

        <Input

          style="width: 400px"

          placeholder="默认下载路径"

          v-model="InputPath"

        >

          <Button slot="append" icon="md-folder" @click="newpath"></Button>

        </Input>

        <Upload action="" webkitdirectory  style="float:left" id="newpath" :before-upload="selectPath"  v-show="false">

          <Button icon="md-folder"></Button>

        </Upload>

      </div>

    </Modal>

    <!-- 新建任务区域结束 -->

    <div style="padding: 20px; width: 100%; height: 100%">

      <div style="float: right; margin-top: -15px">

        <Button

          class="row-btn"

          style="

            margin-right: 10px;

            height: 32px;

            line-height: 32px;

            background-color: #ececec;

          "

          type="text"

          @click="modal1 = true"

        >

          <Icon type="md-add" size="18" />新建下载</Button

        >

        <Button

          class="row-btn"

          style="

            margin-right: 10px;

            height: 32px;

            line-height: 32px;

            background-color: #ececec;

          "

          type="text"

          @click="Paused"

        >

          <Icon type="ios-skip-forward" size="18" />暂停所有任务</Button

        >

        <!-- 下载设置按钮 -->

        <Button

          class="row-btn"

          @click="modal4 = true"

          style="

            margin-right: 10px;

            height: 32px;

            line-height: 32px;

            background-color: #ececec;

          "

          type="text"

        >

          <Icon type="ios-skip-forward" size="18" />下载设置</Button

        >

        <Modal

          v-model="modal4"

          title="下载设置"

          ok-text="保存"

          cancel-text="取消"

        >

          <Form :model="formItem" :label-width="80">

            <div class="modal">

              <FormItem label="下载路径:">

                <Input style="width: 400px" id="open" v-model="InputPath">

                  <Button

                    slot="append"

                    icon="md-folder"

                    @click="newpath"

                  ></Button>

                </Input>

                <!-- <Button @click="aaa"></Button>

								<input id="textfield" />

								<input type="file" style="display: none;" id="fileField1"  @change="bbb" webkitdirectory multiple> -->

              </FormItem>



              <FormItem label="传输设置:">

                <!-- 上传限速 -->

                <div class="srk">

                  <p>上传限速</p>

                  <Select v-model="formItem.select" style="width: 200px">

                    <Option

                      v-for="item in options"

                      :key="item.value"

                      :label="item.label"

                      :value="item.value"

                    ></Option>

                  </Select>

                </div>

                <!-- 下载限速 -->

                <div class="srk" style="margin-top: 5px">

                  <p>下载限速</p>

                  <Select v-model="formItem.select1" style="width: 200px">

                    <Option

                      v-for="item in options2"

                      :key="item.value"

                      :label="item.label"

                      :value="item.value"

                    ></Option>

                  </Select>

                </div>

              </FormItem>



              <FormItem label="任务管理:">

                <div class="srk">

                  <p>同时下载的最多任务数</p>

                  <InputNumber :min="1" :max="16"></InputNumber>

                </div>



                <div class="srk" style="margin-top: 5px">

                  <p>每个服务器最大连接数</p>

                  <InputNumber :min="1" :max="16"></InputNumber>

                </div>

              </FormItem>



              <FormItem>

                <Checkbox>下载完成后通知</Checkbox>

                <Checkbox>下载完成后自动关机</Checkbox>

              </FormItem>

            </div>

          </Form>

        </Modal>

      </div>

    </div>

    <div style="padding: 10px">

      <Table

        border

        :columns="columns12"

        :data="data"

        :show-header="false"

        :showBorder="false"

        highlight-row

      >

        <template slot-scope="{ row }" slot="name">

          <div style="height: 10px"></div>

          <Icon

            type="ios-albums"

            size="20"

            style="float: left; padding-right: 10px"

          />

          <h3>

            {{

              row.files[0].path.substring(

                row.files[0].path.lastIndexOf("/") + 1,

                row.files[0].path.length

              )

            }}

          </h3>

          <strong></strong>

          <Progress

            :percent="

              Number(((row.completedLength / row.totalLength) * 100).toFixed(2))

            "

            :stroke-width="20"

            status="active"

            text-inside

          />



          <div style="margin-top: 10px">

            <h4 style="float: left">

              已下载：{{ (row.completedLength / 1000000).toFixed(2) }} MB /

              {{ (row.totalLength / 1000000).toFixed(2) }} MB

            </h4>

            <h4 style="float: right">

              当前速度：{{ (row.downloadSpeed / 1048576).toFixed(2) }} M

            </h4>

          </div>

          <div style="height: 10px; margin-bottom: 20px"></div>

        </template>

        <template slot-scope="{ row, index }" slot="action">

          <div>

            <Button icon="md-play" @click="Start(index)"></Button>

            <Button icon="md-pause" @click="Pause(index)"></Button>

            <Button icon="md-alert" @click="details = true"></Button>

            <Modal v-model="details">

              <h3>下载文件Gid：{{ row.gid }}</h3>

              <h3>

                已经下载容量：{{

                  (row.completedLength / 1000000).toFixed(2)

                }}

                MB

              </h3>

              <h3>

                文件总容量：{{ (row.totalLength / 1000000).toFixed(2) }} MB

              </h3>

              <h3>下载目录：{{ row.dir }}</h3>

              <h3>

                当前下载速度：{{ (row.downloadSpeed / 1000).toFixed(2) }} kb

              </h3>

              <h3>

                下载文件进度：{{

                  (row.completedLength / 1000000).toFixed(2)

                }}

                MB / {{ (row.totalLength / 1000000).toFixed(2) }} MB

              </h3>

            </Modal>

            <Button icon="md-close" @click="Stop(index)"></Button>

          </div>

        </template>

      </Table>

    </div>

  </div>

</template>

<script>

import axios from "axios";

import { exec } from "child_process";

import { log } from 'util';

var cmd = require("node-cmd");

export default {

  data() {

    return {

      data: [],

      InputPath: "aria2/download", //下载路径

      columns12: [

        {

          title: "Name",

          slot: "name",

        },

        {

          title: "Action",

          slot: "action",

          width: 180,

          float: "right",

        },

      ],

      // 上传限速

      options: [

        {

          value: "1",

          label: "不限速",

        },

        {

          value: "2",

          label: "128KB/s",

        },

        {

          value: "3",

          label: "256KB/s",

        },

        {

          value: "4",

          label: "1MB/s",

        },

        {

          value: "5",

          label: "10MB/s",

        },

      ],

      value: "",

      // 下载限速

      options2: [

        {

          value: "1",

          label: "不限速",

        },

        {

          value: "2",

          label: "128KB/s",

        },

        {

          value: "3",

          label: "256KB/s",

        },

        {

          value: "4",

          label: "1MB/s",

        },

        {

          value: "5",

          label: "10MB/s",

        },

      ],

      formItem: {

        input: "",

        select: "",

        select1: "",

        checkbox: [],

      },

      modal1: false,

      value6: "https://down.qq.com/qqweb/PCQQ/PCQQ_EXE/PCQQ2020.exe", //url

      value14: "", //重命名

      num: 1, //下载线程

      details: false,

      modal4: false,

    };

  },

  mounted() {

    this.lpbn();

      document.getElementsByClassName('ivu-upload-input')[0].webkitdirectory = 'webkitdirectory'

  },

  components: {},

  methods: {

    lpbn() {

      var url = "http://127.0.0.1:6800/jsonrpc";

      var json_rpc1 = {

        id: "",

        jsonrpc: "2.0",

        method: "aria2.tellActive",

        params: ["token:kumao"],

      };



      var interval = setInterval((res) => {

        if (

          this.$route.path == "/Downloading" ||

          this.$route.path == "/DownloadManagement"

        ) {

          axios({

            url: url,

            method: "post",

            crossDomain: true,

            processData: false,

            data: JSON.stringify(json_rpc1),

            headers: {

              contentType: "application/json",

            },

          }).then((respanse) => {

            var _this = this;

            this.data = respanse.data.result;

          });

        } else {

          clearInterval(interval);

        }

      }, 2000);



      // axios({

      // 		url: url,

      // 		method: 'post',

      // 		crossDomain: true,

      // 		processData: false,

      // 		data: JSON.stringify(json_rpc1),

      // 		headers: {

      // 			contentType: 'application/json'

      // 		}

      // 	}).then((respanse) => {

      // 		var _this = this

      // 		this.data = respanse.data.result

      // 	})

    },

    ok() {

      var  name = this.value14; //重命名

      var  download_url = this.value6; //url

      var  thread = this.num; //下载线程

      var  download_name = this.value6.substring(

        this.value6.lastIndexOf("/") + 1

      );

      if(name == ''){

        name = download_name

      }



      const ftp_user = "uftp";

      const ftp_pass = "zxc123456";

      var url = "http://127.0.0.1:6800/jsonrpc";

      var json_rpc = {

        id: "",

        jsonrpc: "2.0",

        method: "aria2.addUri",

        params: [

          "token:kumao",

          [download_url],

          {

            "download-result": "full",

            out: name,

            dir:this.InputPath,

            "ftp-user": ftp_user,

            "ftp-passwd": ftp_pass,

          },

        ],

      };



      var _this = this;

      axios({

        url: url,

        method: "post",

        crossDomain: true,

        processData: false,

        data: JSON.stringify(json_rpc),

        headers: {

          contentType: "application/json",

        },

      }).then((res) => {

        _this.asd = res.data.result;

        // console.log(_this.asd)

      });



      this.data.push({

        title: this.data.length,

        description: this.data.length,

        content:

          "This is the content, this is the content, this is the content, this is the content.",

      });

    },

    cancel() {

      this.$Message.info("取消成功");

    },

    asd() {

      var url = "http://127.0.0.1:6800/jsonrpc";

      var json_rpc1 = {

        id: "",

        jsonrpc: "2.0",

        method: "aria2.tellActive",

        params: ["token:kumao"],

      };



      setInterval((res) => {

        axios({

          url: url,

          method: "post",

          crossDomain: true,

          processData: false,

          data: JSON.stringify(json_rpc1),

          headers: {

            contentType: "application/json",

          },

        }).then((respanse) => {

          var _this = this;

          const completedLength = respanse.data.result.completedLength; //已完成的下载长度(以字节为单位)。

          const totalLength = respanse.data.result.totalLength; //下载的总长度(以字节为单位)。

          const ok = (completedLength / totalLength) * 100;

          const kb = respanse.data.result.downloadSpeed / 1024;

          Number(ok);

          _this.arr = Number(ok.toFixed(2));

          _this.kb = kb.toFixed(2);



          var _this = this;

          this.arr = respanse.data.result;

          // console.log(this.arr)

        });

      }, 1000);

    },

    Paused(index) {

      var url = "http://127.0.0.1:6800/jsonrpc";

      var json_rpc1 = {

        id: "",

        jsonrpc: "2.0",

        method: "aria2.pauseAll",

        params: ["token:kumao"],

      };

      axios({

        url: url,

        method: "post",

        crossDomain: true,

        processData: false,

        data: JSON.stringify(json_rpc1),

        headers: {

          contentType: "application/json",

        },

      }).then((respanse) => {});

    },

    handleChange(value) {

      // console.log(value);

    },

    Start(index) {},

    Pause(index) {

      var url = "http://127.0.0.1:6800/jsonrpc";

      var json_rpc1 = {

        id: "",

        jsonrpc: "2.0",

        method: "aria2.pause",

        params: [this.data[index].gid],

      };



      axios({

        url: url,

        method: "post",

        crossDomain: true,

        processData: false,

        data: JSON.stringify(json_rpc1),

        headers: {

          contentType: "application/json",

        },

      }).then((respanse) => {});

    },



    Stop(index) {

      var url = "http://127.0.0.1:6800/jsonrpc";

      var json_rpc1 = {

        id: "",

        jsonrpc: "2.0",

        method: "aria2.remove",

        params: [this.data[index].gid],

      };



      axios({

        url: url,

        method: "post",

        crossDomain: true,

        processData: false,

        data: JSON.stringify(json_rpc1),

        headers: {

          contentType: "application/json",

        },

      }).then((respanse) => {});

    },

    // 选择下载路径

    newpath() {

      var bb = document.getElementById("newpath").childNodes[0].childNodes[0].click()

    },

    //选中的文件夹路径

    selectPath(data,datas){

        console.log(data.path);

        this.InputPath = data.path

        window.sessionStorage.setItem("DownloadingPath", data.path)

    },

    InputPath1() {

      var data = document.getElementById("newpath");

      debugger;

      var b = 0;

      // this.InputPath = document.getElementById('newpath').value



    },

  },

};

</script>





<style>

.ivu-card-body {

  padding: 5px;

}



.el-header,

.el-footer {

  background-color: #b3c0d1;

  color: #333;

  line-height: 60px;

}



.el-upload-dragger {

  width: 460px;

}



.btn-right {

  width: 180px;

  float: right;

  text-align: center;

}



.input {

  margin-top: 29px;

  float: left;

}



.row-btn {

  border: 1px solid rgba(255, 0, 0, 0);

}



.row-btn:hover {

  border: 1px solid rgba(209, 209, 209, 0.7);

}



/* .el-main {

				background-color: #E9EEF3;

				color: #333;

				text-align: center;

				line-height: 300px;

			} */

</style>